<template>
  <div class="play-bar">
    <img
      class="thumb"
      :src="
        currentSong.song
          ? currentSong.picUrl
          : currentSong.al.picUrl | completeImageUrl
      "
      alt=""
    />
    <h5>
      {{ currentSong.name }}
      <span
        v-for="(ali, index) in currentSong.song
          ? currentSong.song.alias
          : currentSong.alia"
        :key="index"
        >({{ ali }})</span
      >
      <i>
        -
        {{
          currentSong.song ? currentSong.song.album.name : currentSong.al.name
        }}</i
      >
    </h5>

    <div class="progress">
      <canvas ref="canvas" width="60" height="60"></canvas>
      <span v-if="!playing" @click.stop="$emit('audio-play-handler')"> ▶</span>
      <span v-else @click.stop="$emit('audio-pause-handler')">⏸</span>
    </div>
    <div class="list" @click.stop="$parent.showMyPlayList = true">列表</div>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  computed: {
    percentedProgress: function () {
      return this.duration === 0 ? 0 : this.currentTime / this.duration;
    },
  },
  watch: {
    percentedProgress: function (n) {
      const context = this.$refs.canvas.getContext("2d");
      //   context.fillRect(0, 0, 10, 10);
      context.clearRect(0, 0, 60, 60);
      context.lineWidth = 2;

      //   context.beginPath();
      //   context.arc(15, 15, 14, 0, (Math.PI / 180) * 360);
      //   context.strokeStyle = "rgba(0,0,0,0.3)";
      //   context.stroke();

      //   context.beginPath();
      //   context.arc(15, 15, 14, -90, (Math.PI / 180) * 360 * n - 90);
      //   context.strokeStyle = "rgba(0,0,0,0.5)";

      //   context.stroke();

      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (360 * n - 90)
      );
      context.strokeStyle = "rgba(255,0,0,0.5)";
      context.lineWidth = 2;
      context.stroke();

      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * (360 * n - 90),
        (Math.PI / 180) * 270
      );
      context.strokeStyle = "rgba(0,0,0,0.3)";
      context.lineWidth = 1;

      context.stroke();
    },
  },
};
</script>

<style lang="less">
.play-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: white;
  border-radius: 20px 20px 0 0;
  align-items: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  z-index: 9;

  display: flex;
  .thumb {
    width: 30px;
    border-radius: 50%;
  }
  h5 {
    flex: 1;
  }
  .progress {
    position: relative;
    canvas {
      //   outline: 1px solid green;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    span {
      //   background: white;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
    }
  }
}
</style>